<template>
  <div>
    <el-table :data="data" border :cell-style="{ 'vertical-align': 'top' }" :header-cell-style="{background:'#f8f8f8 !important'}">
      <el-table-column prop="prodBatch" label="药品信息" width="200px">
        <template slot-scope="scope">
          <div class="flex">
            <div class="font14">批准文号：</div>
            <div>{{ scope.row.approvalNum }}</div>
          </div>
          <div class="flex margin-top">
            <div class="font14">商品名称：</div>
            <div class="font14">{{ scope.row.name }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="niversalName" label="通用名称" width="180px">
        <template slot-scope="scope">
          <div class="flex">
            <div class="font14">名称：</div>
            <div class="font14">{{ scope.row.niversalName }}</div>
          </div>
          <div class="flex margin-top-sm">
            <div class="font14">剂型：</div>
            <div class="font14">{{ scope.row.dosageFrom }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="prodBatch" label="生产信息" width="200px">
        <template slot-scope="scope">
          <div class="flex">
            <div class="font14">生产厂家：</div>
            <div class="font14">{{ scope.row.prodFactory }}</div>
          </div>
          <div class="flex margin-top">
            <div class="font14">生产批号：</div>
            <div class="font14">{{ scope.row.prodBatch }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="dosage" label="用法用量" width="180px">
        <template slot-scope="scope">
          <div class="dosage">
            <span class="font14">用 量：</span>
            <span class="font14">{{ scope.row.dosage }}</span>
            <span class="font14">{{ scope.row.dosageUnit }}</span>
            <span class="font14">{{ scope.row.dosageDay }}日</span>
            <span class="font14">{{ scope.row.dosageRate }}次</span>
          </div>
          <div class="margin-top-sm">
            <span class="font14">给药途径：</span>
            <span class="font14">{{ scope.row.drugRoute }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="用药起止时间" width="190px">
        <template slot-scope="scope">
          <div class="drug-date">
            <span class="font14">从：</span>
            <span class="font14">{{ scope.row.startDate }}</span>
          </div>
          <div class="drug-date mr-t">
            <span class="font14">到：</span>
            <span class="font14">{{ scope.row.endDate }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="用药原因" min-width="150px">
        <template slot-scope="scope">
          <span class="font14">{{ scope.row.reason }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
    }
  },
  watch: {
    data: {
      deep: true,
      handler() {
      }
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.add-icon {
  color: #409eff;
  font-size: 20px;
  cursor: pointer;
  transform: translateY(2px);
}
.delete-icon {
  color: rgb(198, 52, 32);
  font-size: 20px;
  cursor: pointer;
}
.select-btn {
  padding: 7px 7px;
  margin-left: 0;
}
.drug-date {
  display: flex;
  margin-top: 5px;
  .mr-t {
    margin-top: 5px;
  }
  .drug-date-input {
    width: 120px;
  }
}
.dosage {
  display: flex;
  .dosage-input {
    width: 50px;
    input {
      padding: 0 5px;
    }
  }
}
.dosage-container {
  max-height: 500px;
  overflow-y: auto;
  .dosage-table {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    .dosage-table-item {
      width: 20%;
      height: 40px;
      line-height: 40px;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      padding: 0 10px;
      cursor: pointer;
      &:hover {
        background: #1989fa;
        color: #fff;
        opacity: 0.5;
      }
      &.dosage-table-item-acitve {
        background: #1989fa;
        color: #fff;
      }
    }
  }
}
</style>
<style lang="scss">
.dosage {
  display: flex;
  .dosage-select {
    width: 80px;
    margin-left: 5px;
  }
  .dosage-input {
    width: 50px;
    margin-left: 5px;
    .el-input__inner {
      padding: 0 5px;
    }
  }
}
</style>
